<template>
    <div class="cart-root">
        <ul>
            <li v-for="c in Carttags">
                <router-link to="">
                    <img :src="c.cover">
                    <p 
                        class="tag-name" 
                        @touchstart="homeCanClick"
                    >{{c.name}}</p>
                </router-link>
                
            </li>
        </ul>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    computed:{
        ...mapState([
            "Carttags",
            "changepointer"
        ])
    },
    mounted:function(){
        var params = {
            city_name:"全部城市",
        }
        this.$store.dispatch("requestCarttags",params)
        .then(res=>{
            this.$store.commit("setCarttags",res.data.data.product_tabs);
        });
    },
    methods:{
        homeCanClick:function(){
            setTimeout(()=> {
                this.$store.commit("setChangepointer",false);
            }, 600);
        }
    }
}
</script>

<style scoped>
.cart-root{
    width: 100vw;
    height: calc(100vh - 44px);
    position: fixed;
    top:44px;
    left: 0;
    background-color: #FFFFFF;
    z-index: 2;
    overflow:hidden;
}
ul{
    padding: 0;
    padding-left: 3vw;
    width: 85vw;
    margin: 0 auto;
}
li{
    list-style: none;
    position: relative;
    display: inline-block;
    width: 24vw;
    height: 24vw;
    padding-bottom: 30.6%;
    margin-top: 12px;
    text-align: center;
    margin-right: 3vw;
}
li a{
    display: inline-block;
    width: 24vw;
    height: 24vw;
}
li img{
    width: 24vw;
    height: 24vw;
}
li:nth-of-type(3n){
    margin-right: 4.1%;
}
.tag-name{
    position: absolute;
    left: 0;
    top:0;
    margin: 0;
    width: 24vw;
    height: 24vw;
    background: rgba(0,0,0,.1) linear-gradient(180deg,rgba(0,0,0,.4),transparent 50%,transparent);
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.5);
    font-size: 0.9rem;
    padding-top: 15vw;
}
</style>